<template>
  <div class="app">
    <!-- 头 -->
    <div class="head">
      <img src="./assets/img/login/head-bg.png">
      <div class="text">
        <p>您好，</p>
        <p class="f30">欢迎登录车联网服务！</p>
      </div>
      <img src="./assets/img/login/car.png">
    </div>
    <!-- 输入框 -->
    <div class="mybody flex fdc aic">
      <input v-model.trim = "user.phone" type="number" class="phone" placeholder="手机号登录">
      <p class="texterror" :class="{ error: error }">{{ textPhone }}</p>
      <div class="pr">
        <input v-model.trim = "user.auth" type="text" class="auth" placeholder="输入验证码">
        <button class="pa auth-code f25" @click="gain">{{ time }}</button>
      </div>
      <button class="login f25 mt50" @click="login">登录</button>
    </div>
    <!-- 位置权限 -->
    <div class="footer" v-if="footer">
      <p>获取你的位置信息</p>
      <p>你的位置信息将用于获取你附近的站点</p>
      <div class="flex jcsb">
        <!-- <button @click="footer = false; jurisdiction = 0">拒绝</button> -->
        <button @click="footer = false; user.jurisdiction = 0">拒绝</button>
        <button @click="footer = false; user.jurisdiction = 1">允许</button>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/mine.js'
export default {
  mounted() {
  },
  methods: {
    login() {
      //当手机号+验证码+允许获取位置权限  都为true时跳转
      if(this.user.phone && this.user.auth && this.user.jurisdiction){
        login({
          tel: "13800000001",
        }).then(r => {
          // console.log(r.data);
          localStorage.setItem('userInfo',JSON.stringify(r.data))
          this.$router.push({
            path: '/home',
          })
        })
      }else{
        //否则提示信息并弹出获取位置信息框
        this.$message("请点击允许，获取当前位置信息！");
        this.footer = true;//显示获取位置信息框
      }  
    },
    //手机号格式判断
    gain() {
      if (this.user.phone == '') {
        this.textPhone = '手机号不得为空';
        this.error = true;
        return;
      } else if (this.user.phone.length != 11) {
        this.textPhone = '手机号格式错误';
        this.error = true;
        return;
      } else if (this.user.phone.length == 11) {
        if (this.reg.test(this.user.phone)) {
          this.error = false;
          if (typeof (this.time) != typeof (0)) {
            this.time = 60;
          }
          if (this.time != 0 && this.time != 60) {
            return;
          }
          this.timer = setInterval(() => {
            this.time--;
            if (this.time == 0) {
              this.time = '重新获取';
              clearInterval(this.timer);
            }
          }, 1000);
          // 发起验证码请求
        } else {
          this.error = true;
          this.textPhone = '手机号格式错误';
          return;
        }
      }
    }
  },
  data() {
    return {
      timer: null, // 定时器
      time: '获取验证码',
      reg: /^1[3456789]\d{9}$/, // 手机号验证规则
      footer: true, // 位置权限隐藏显示
      textPhone: '手机号登录',
      error: false, // 错误提醒
      user: {
        phone: 13800000001,
        jurisdiction: 0 ,// 权限
        auth:123456,//验证码
      } // 用户信息，
    }
  }
}
</script>
<style scoped>
.error {animation: animeError .25s 1 forwards;}
@keyframes animeError { 100% {  height: 24rem;  }}
.texterror {
  position: absolute;
  color: red;
  font-size: 20rem;
  top: 205rem;
  left: 125rem;
  overflow: hidden;
  height: 0rem;
  line-height: 24rem;
  transition: height .25s;
}
.c-red {
  color: red;
}
.footer div button:nth-child(2) {
  background-color: #4C8EFE;
}

.footer div button:nth-child(1) {
  background-color: #E0E0E0;
}

.footer div button {
  width: 222rem;
  height: 60rem;
  border-radius: 10rem;
  border: none;
  color: white;
  font-size: 25rem;
}

.footer p:nth-child(2) {
  color: #959595;
  font-size: 20rem;
  margin-bottom: 47rem;
}

.footer p:nth-child(1) {
  color: #333333;
  font-size: 27rem;
  margin-bottom: 33rem;
}

.footer {
  height: 308rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 70rem 58rem 0 58rem;
  box-sizing: border-box;
  border-radius: 30rem 30rem 0 0;
  box-shadow:0  0  10rem #aaa;
}

.phone {
  margin-bottom: 38rem;
  margin-top: 120rem;

}

.auth-code {
  width: 175rem;
  height: 60rem;
  background-color: #4C8EFE;
  border-radius: 50rem;
  color: white;
  border: none;
  position: absolute;
  bottom: 15rem;
  right: 7rem;
}

input:focus {
  outline: none;
}


input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #BFBFBF;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #BFBFBF;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #BFBFBF;
}

input {
  width: 500rem;
  padding: 24rem 10rem;
  border: none;
  border-bottom: 2rem solid #DEDEE0;
  font-size: 25rem;
  color: #838383;
}

.login {
  width: 474rem;
  height: 75rem;
  border-radius: 50rem;
  border: none;
  background-image: linear-gradient(to right, #60a0ff, #0862E6);
  color: white;
}

.mybody {
  border-radius: 40rem;
  background-color: white;
  position: relative;
  top: -74rem;
}

.head .text p:nth-child(1) {
  font-size: 45rem;
  margin-bottom: 30rem;
}

.head .text {
  position: absolute;
  left: 105rem;
  top: 162rem;
  color: white;
}

.head img:nth-child(3) {
  height: 234rem;
  position: absolute;
  right: 30rem;
  top: 186rem;
  z-index: 10;
}

.head img:nth-child(1) {
  width: 100%;
}

.head {
  position: relative;
}

.app {
  height: 100vh;
  background-color: white;
}
</style>